<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>懒人原生模拟移动APP飞入购物车动画效果</title>
	<meta content="width=device-width, initial-scale=1,maximum-scale=1,maximum-scale=1, user-scalable=no" name="viewport">
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<!-- 代码部分begin -->
	<div class="store">
		<aside class="list">
			<div id="tuijian" class="item">
				<li productid="1444574" productattrid="3665545" packcost="2">
					<img src="images/logoimg.png" alt="" style="width: 50px;height: 50px;display:inline-block;">
					<div style="display: inline-block;">
					<p class="title">【微辣】脆嫩牛肚粉</p>
					<p class="price">￥20.0</p>
					<p class="sale">近期销售7份</p>
					<div class="add0"></div>
					<div class="add1">
						<i class="reduce"></i>
						<span class="number">1</span>
						<i class="add"></i>
					</div>
					</div>
				</li>
			</div>
		</aside>
	</div>
	<footer class="shop">
		<div class="money">
			<div class="shopcar">
				<span id="amount">99</span>
				<img src="images/shopcar.png" alt="">
			</div>
			<div class="num">￥<span id="price">0.0</span></div>
		</div>
		<div id="go" class="go">选好了</div>
	</footer>
	<img src="../images/logo.png" style="display:none;">
	<script src="jquery-1.9.1.min.js"></script>
	<script src="jquery.fly.min.js"></script>
	<script>
		function addFly(obj,event) {
		    var offset = $('#amount').offset();
			var img =$(obj).parents('li').find('img').attr('src');//获取当前点击图片链接
			var flyer = $('<img class="u-flyer" src="'+img+'"/>');//抛物体对象
		    flyer.fly({
		        start: {
		            left: event.pageX-40,//抛物体起点横坐标
		            top: event.pageY-20//抛物体起点纵坐标
		        },
		        end: {
		            left: offset.left,//抛物体终点横坐标
		            top: offset.top,//抛物体终点纵坐标
		            width: 24,
		            height: 24,
		        }
		    });
		}
		$(function(){
			$(".add").on("click",function(){ //增加数量
				addFly(this,event);
			});
			
		})
	</script>
	<!-- 代码部分end -->
</body>
</html>